<template>
    <div>
      <!--头部 开始-->
      <div id="top">
        <div class="addr">
          <a href="javascript:history.go(-1);" class="returnBtn"></a>
          休闲零食
          <a href="#" class="searchBtn"></a>
        </div>
        <div class="swiper-container" id="nav">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><span>坚果炒货</span></div>
            <div class="swiper-slide"><span>饼干蛋糕</span></div>
            <div class="swiper-slide"><span>麦片</span></div>
            <div class="swiper-slide"><span>蜜饯果干</span></div>
            <div class="swiper-slide"><span>五谷冲饮</span></div>
            <div class="bar">
              <div class="color"></div>
            </div>
          </div>
        </div>
      </div>
      <!--头部 结束-->
      <!--中间内容 开始-->
      <div class="swiper-container" id="page">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
              <div class="swiper-wrapper">
                <div class="swiper-slide slidescroll swiper-slide-active">
                  <div class="classificaArray">
                    <div class="arrayNav" id="tab">
                      <a href="javascript:void(0);" class="current">热门</a>
                      <a href="javascript:void(0);">
                        价格
                        <div class="sortIcon">
                          <em class="Cur"></em>
                          <em></em>
                        </div>
                      </a>
                    </div>
                    <div class="arrayList" id="content">
                      <div class="arrayListInfo" style="display:block;">
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a style="width:100%; height: 0.3rem; background: #f4f5f7; display: block;"></a>
                      </div>
                      <div class="arrayListInfo">
                        <a href="#">
                          <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                          <p>【22】【百草味-手剥小白杏200g】坚果干果</p>
                          <div class="price">
                            <span class="presentNum">￥<em>19</em>.9</span>
                            <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                          </div>
                          <div class="discount">
                            <span class="limit">限时折扣</span>
                            <span class="specific">99选10</span>
                          </div>
                        </a>
                        <a style="width:100%; height: 0.3rem; background: #f4f5f7; display: block;"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide slidescroll" style="height: 100px;background-color: red">
                  我也是有底线的
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
              <div class="swiper-wrapper">
                <div class="swiper-slide slidescroll">
                  222
                </div>


              </div>
            </div>
          </div>
          <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
              <div class="swiper-wrapper">
                <div class="swiper-slide slidescroll">

                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
              <div class="swiper-wrapper">
                <div class="swiper-slide slidescroll">

                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
              <div class="swiper-wrapper">
                <div class="swiper-slide slidescroll">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--中间内容 结束-->
    </div>
</template>

<script>

  import $ from 'jquery'
  import Swiper from 'swiper'

  import {TouchSlide} from '../../js/plugins/TouchSlide.1.1.min.js'
  export default {
        name: "classificationTwoPage",
      components:{
        Swiper,
        TouchSlide,

      },
      methods:{
        /*分类二级页*/
        classifiSecond:function (){

    let bar;
    let topBar;
    let barwidth = 36 //导航粉色条的长度px
    let tSpeed = 300 //切换速度300ms
    let clientWidth;
    let navSum;
    let navSlideWidth;
    let  navWidth;
          var navSwiper = new Swiper('#nav', {
            slidesPerView: 5,
            freeMode: true,
            on: {
              init: function() {
                navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
                bar = this.$el.find('.bar')
                bar.css('width', navSlideWidth)
                bar.transition(tSpeed)
                navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置

                clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
                navWidth = 0
                for (let i = 0; i < this.slides.length; i++) {
                  navWidth += parseInt(this.slides.eq(i).css('width'))
                }

                topBar = this.$el.parents('body').find('#top') //页头

              },

            },
          });

          var pageSwiper = new Swiper('#page', {
            //autoHeight:true,
            watchSlidesProgress: true,
            resistanceRatio: 0,
            on: {
              touchMove: function() {
                let progress = this.progress
                bar.transition(0)
                bar.transform('translateX(' + navSum * progress + 'px)')
                //粉色255,72,145灰色51,51,51
                for (let i = 0; i < this.slides.length; i++) {
                  let slideProgress = this.slides[i].progress
                  if (Math.abs(slideProgress) < 1) {
                    let r = Math.floor((235 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                    let g = Math.floor((189 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                    let b = Math.floor((104 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                    navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
                  }
                }
              },
              transitionStart: function() {
                let activeIndex = this.activeIndex
                let activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
                //释放时导航粉色条移动过渡
                bar.transition(tSpeed)
                bar.transform('translateX(' + activeSlidePosition + 'px)')
                //释放时文字变色过渡
                navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
                navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(235,189,104,1)')
                if (activeIndex > 0) {
                  navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
                  navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(102,102,102,1)')
                }
                if (activeIndex < this.slides.length) {
                  navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
                  navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(102,102,102,1)')
                }
                //导航居中
                let navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离

                navSwiper.setTransition(tSpeed)
                if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
                  navSwiper.setTranslate(0)
                } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
                  navSwiper.setTranslate(clientWidth - navWidth)
                } else {
                  navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
                }

              },
            }
          });

          navSwiper.on('tap', function(e) {
            let clickIndex = this.clickedIndex
            let clickSlide = this.slides.eq(clickIndex)
             pageSwiper.slideTo(clickIndex, 0);
            this.slides.find('span').css('color', 'rgba(102,102,102,1)');
            clickSlide.find('span').css('color', 'rgba(235,189,104,1)');
          })
    //内容滚动
         let startPosition;
    var scrollSwiper = new Swiper('.scroll', {
      //65是头部的高
      //36是top地址和搜索的高
      autoHeight:true,
      slidesOffsetBefore: 72,
      direction: 'vertical',
      freeMode: true,
      slidesPerView: 1,

      mousewheel: {
        releaseOnEdges: true,
      },


    })
  },

  /*分类三级切换*/

  /*查看收起*/

      },
      mounted:function () {
        this.classifiSecond(); //分类二级页滑动导航

        var content = $(".upText").html();
        var more = true;
        //限制字符个数
        var hide = function (){
          $(".upText").each(function(){
            var maxheight=120;
            if($(this).text().length>maxheight){
              $(this).text($(this).text().substring(0,maxheight));
              $(this).html($(this).html()+'...');
              more = true;
              $('.upBtn').html("查看更多");
            } else {
              $('.upBtn').hide();
            }
          });
        };
        hide();
        $('.upBtn').click(function(){
          if(more){
            $(".upText").html(content);
            $(this).html("收起文章");
            more = false;
          }else{
            hide();
          }
        });

        var $li = $('#tab a');
        var $ul = $('#content .arrayListInfo');

        $li.on("click",function(){
          var $this = $(this);
          var $t = $this.index();
          $li.removeClass();
          $this.addClass('current');
          $ul.css('display','none');
          $ul.eq($t).css('display','block');
        })
      }
    }
</script>

<style scoped>
  @import "../../css/other/threeLevel.css";
  @import "../../css/plugins/swiper.min.css";
  @import "../../css/plugins/plugIn.css";
</style>
